<template>
  <div class="serch_list_left">
    <div class="serch_list_left-l">
      <ul>
        <li
          v-for="(_item, _index) in props.list"
          :key="_item"
          @click="handeClickDate(_index)"
          :class="num === _index ? 'active' : ''"
        >
          {{ _item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { defineProps, ref, defineEmits } from "vue";
import { publickGetDate } from "@/utils/acquisitionTime";
const emits = defineEmits("update");
const props = defineProps({
  list: {
    type: Array,
    default() {
      return [];
    }
  }
});
const num = ref(0);
// 点击事件
const handeClickDate = index => {
  num.value = index;
  if (index == 0) {
    let today = publickGetDate(1);
    let startCreateTime = today[0] + " 00:00:00";
    let endCreateTime = today[0] + " 23:59:59";
    emits("update", startCreateTime, endCreateTime);
  } else if (index == 1) {
    let today = publickGetDate(2);
    let startCreateTime = today[0] + " 00:00:00";
    let endCreateTime = today[0] + " 23:59:59";
    emits("update", startCreateTime, endCreateTime);
  } else if (index == 2) {
    let today = publickGetDate(7);
    let startCreateTime = today[0] + " 00:00:00";
    let endCreateTime = today[today.length - 1] + " 23:59:59";
    emits("update", startCreateTime, endCreateTime);
  } else if (index == 3) {
    let today = publickGetDate(30);
    let startCreateTime = today[0] + " 00:00:00";
    let endCreateTime = today[today.length - 1] + " 23:59:59";
    emits("update", startCreateTime, endCreateTime);
  }
};
</script>
<style scoped lang="scss">
.active {
  color: #007dff !important;
  border: 1px solid #007dff !important;
}
.serch_list {
  display: flex;
  justify-content: space-between;
  &_left {
    flex: 1;
    display: flex;
    &-l {
      flex: 1;
      ul {
        display: flex;
        width: auto;
        max-width: 420px;
        min-width: 420px;
        li {
          height: 32px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          padding: 6px 32px;
          border: 1px solid #d8d8d8;
          font-size: 14px;
          border-right: none;
          box-sizing: border-box;
          cursor: pointer;
          flex-wrap: nowrap;
        }
        li:last-child {
          border-right: 1px solid #d8d8d8;
          box-sizing: border-box;
        }
      }
    }
    &-r {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }
  }
  &_right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
